<template>
  <div class="corp-form">
    <el-row :gutter="24">
      <!-- <el-col :span="4" :xs="4" :sm="4" :md="4" :lg="6" :xl="4">
        <MenuTree />
      </el-col> -->
      <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-scrollbar height="83vh">
          <!-- 公司信息管理 -->
          <vab-card>
            <div class="flex_sb">
              <div class="flex">
                <p class="leve-title">
                  公司信息管理 {{ isUpdate ? '-更新中' : '-已审核' }}
                </p>
                <p style="margin-left: 22px">
                  『黛优佳 国企榜一 v我50 尝尝鲜』
                </p>
              </div>
              <div class="flex">
                <el-button
                  v-if="!isUpdate"
                  type="primary"
                  @click="handleClick('update')"
                >
                  更新
                </el-button>
                <el-button v-if="isUpdate" @click="handleClick('save')">
                  暂存
                </el-button>
                <el-popconfirm
                  :title="promptTitle"
                  @confirm="handleClick('submit')"
                >
                  <template #reference>
                    <el-button v-if="isUpdate" type="primary">提交</el-button>
                  </template>
                </el-popconfirm>
                <el-button
                  v-if="isUpdate"
                  type="info"
                  @click="handleClick('close')"
                >
                  取消
                </el-button>
              </div>
            </div>
          </vab-card>
          <el-form
            ref="form"
            :class="!isUpdate ? 'corp-form not-border' : 'corp-form'"
            :disabled="isUpdate ? false : true"
            label-position="right"
            :model="formData.formModel"
            :rules="rules"
          >
            <el-scrollbar height="calc(83vh - 100px)">
              <!-- 基础信息 -->
              <BaseMode
                v-if="formData.baseInfo"
                :baseInfo="formData.baseInfo"
                :is-update="isUpdate"
                :area-options="formData.areaOptions"
              />
              <!-- 发票信息 -->
              <InvoiceMode
                :isUpdate="isUpdate"
                :list="formData.invoiceList"
                :tabs-list="formData.invoiceTabs"
                tabs-key="invoiceTabs"
                is-code
                @handle-copy="handleCopy"
                @handle-new="handleNew"
                @handle-tab="handleTab"
                @remove-tab="removeTab"
              />
              <!-- 银行信息 -->
              <BankMode
                :isUpdate="isUpdate"
                :list="formData.bankList"
                :tabs-list="formData.bankTabs"
                tabs-key="bankTabs"
                @handle-copy="handleCopy"
                @handle-new="handleNew"
                @handle-tab="handleTab"
                @remove-tab="removeTab"
              />
              <!-- 收货地址信息 -->
              <AddRessMode
                :isUpdate="isUpdate"
                :list="formData.addressList"
                :tabs-list="formData.addressTabs"
                :areaOptions="formData?.areaOptions"
                tabs-key="addressTabs"
                @handle-copy="handleCopy"
                @handle-new="handleNew"
                @handle-tab="handleTab"
                @remove-tab="removeTab"
              />
              <!-- 信用额度 -->
              <CreditMode
                :list="formData.creditInfo"
                :isUpdate="isUpdate"
                :areaOptions="formData?.areaOptions"
              />
            </el-scrollbar>
          </el-form>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
  import { TabsPaneContext } from 'element-plus'
  import { getCorpBaseData } from '~/src/api/corp'
  import {
    promptTitle,
    rules,
    areaOptions,
  } from '/@/views/corpManagement/corpCustomers/tools'
  import BaseMode from '/@/views/corpManagement/corpCustomers/components/BaseMode.vue'
  import InvoiceMode from '/@/views/corpManagement/corpCustomers/components/InvoiceMode.vue'
  import BankMode from '/@/views/corpManagement/corpCustomers/components/BankMode.vue'
  import AddRessMode from '/@/views/corpManagement/corpCustomers/components/AddressMode.vue'
  import CreditMode from '/@/views/corpManagement/corpCustomers/components/CreditMode.vue'
  defineOptions({
    name: 'groupCustomers',
  })

  // 变量
  const isUpdate = ref<boolean>(false)
  const formData: any = reactive({
    formModel: null,
    bankList: [],
    addressList: [],
    treeList: [],
    invoiceList: [],
    invoiceValue: 1,
    baseInfo: {},
    creditInfo: {},
    areaOptions: [],

    invoiceTabs: [{ label: '发票信息' }],
    bankTabs: [{ label: '银行信息' }],
    addressTabs: [{ label: '收货地址信息' }],
  })

  // 获取
  const _GetCorpBaseData = async () => {
    const res = await getCorpBaseData()
    formData.bankList = res.data.bankList
    formData.invoiceList = res.data.invoiceList
    formData.invoiceTabs = res.data.invoiceTabs
    formData.baseInfo = res.data.baseInfo
    formData.treeList = res.data.treeList
    formData.addressList = res.data.addressList
    formData.creditInfo = res.data.creditInfo
  }
  const _GetAreaOptions = async () => {
    formData.areaOptions = await areaOptions()
  }
  // 点击事件
  const handleClick = async (value: string) => {
    if (value == 'update') {
      isUpdate.value = true
    }
    if (value == 'close') {
      isUpdate.value = false
    }
    if (value == 'submit') {
      await formData.formModel.validate((valid: any, fields: any) => {})
    }
  }
  let id = 0
  // 复制
  const handleCopy = (key: string, i = 0) => {
    formData[key].push({
      ...formData[key][i],
      label: `${formData[key][i].label}备份(${id + 1})`,
    })
  }
  // 新建
  const handleNew = (key: string, i = 0) => {
    const label = formData[key][i].label

    formData[key].push({
      label: `${label}备份(${id + 1})`,
    })

    console.log(key, i, label, formData[key], '新建')
  }
  // 模块tab选择
  const handleTab = (tab: TabsPaneContext) => {
    formData.invoiceValue = tab?.props?.name
  }
  // 模块tab删除
  const removeTab = (key: string, i = 0) => {
    formData[key].splice(i, 1)
  }

  // 周期
  onMounted(() => {
    _GetCorpBaseData()
    _GetAreaOptions()
  })
</script>
<style lang="scss" scoped>
  @import '../corpCustomers/index.scss';
</style>
